<template>
	<tm-fullView>
		<tm-menubars title="弹出菜单" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet color="blue text ">
			<tm-menu @change="change" :list="['发起群聊','添加朋友']">
				<tm-button>居中显示</tm-button>
			</tm-menu>
			<tm-menu black :list="list">
				<tm-button>图标列表显示</tm-button>
			</tm-menu>
		</tm-sheet>
		<tm-sheet color="blue text ">
			<tm-menu direction="top" :list="['发起群聊','添加朋友']">
				<tm-button>上方显示</tm-button>
			</tm-menu>
			<tm-menu direction="top" black :list="list">
				<tm-button>图标列表显示</tm-button>
			</tm-menu>
		</tm-sheet>
		<tm-sheet color="blue text ">
			
			<tm-menu direction="bottom" ment-direction="left" tip-direction="left" black :list="list">
				<view style="width: 200upx;">底部左边</view>
			</tm-menu>
			<tm-menu  black :list="list">
				<view style="width: 200upx;" class="text-align-center">底部居中</view>
			</tm-menu>
			<tm-menu direction="bottom" ment-direction="right" tip-direction="right"  black :list="list">
				<view style="width: 200upx;">底部右边</view>
			</tm-menu>
		</tm-sheet>
		<tm-sheet color="blue text ">
			<tm-menu  show direction="bottom" ment-direction="right"  tip-direction="right"  black :list="list">
				<view class="d-inline-block">默认显示底部，左边指示三角形在右<tm-icons name="icon-plus-circle-fill"></tm-icons>边  </view>
			</tm-menu>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmMenu from "@/tm-vuetify/components/tm-menu/tm-menu.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmMenu,tmIcons},
		data() {
			return {
				list:[
					{title:'发起群聊',icon:'icon-pengyouquan',iconColor:'green'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
					{title:'添加朋友',icon:'icon-QQ',iconColor:'blue'},
				],
				show:true
			}
		},
		methods: {
			change(e){
				// 此时为{index:0,value:"发起群聊"}
				console.log(e);
				
			}
		}
	}
</script>

<style>

</style>
